<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Disabled demo Demo Page</title>
  </head>

  <body>
  <h2>Disabled demo Page</h2>
    <div id="ephox-ui">
      <div class="tinymce">
    <div>
      <h1>Welcome to Your Project!</h1>
      <p>This is a sample paragraph to showcase <strong>editable</strong> and <strong>non-editable</strong> elements in TinyMCE.</p>

      <h2>About the Project</h2>
      <p>
        This project is a demonstration of how to use various elements within TinyMCE. You can add images, tables, and editable text.
        TinyMCE is a robust WYSIWYG editor that allows for rich content editing and formatting.
      </p>

      <h2>Sample Table</h2>
      <table border="1" cellpadding="10" cellspacing="0" style="width: 100%; margin: 10px 0;">
        <thead>
          <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Row 1, Cell 1</td>
            <td contenteditable="false">Row 1, Cell 2 (Non-Editable)</td>
            <td>Row 1, Cell 3</td>
          </tr>
          <tr>
            <td>Row 2, Cell 1</td>
            <td>Row 2, Cell 2</td>
            <td>Row 2, Cell 3</td>
          </tr>
        </tbody>
      </table>

      <h2>Image Section</h2>
      <p>Below is a sample image that can be resized and styled within TinyMCE.</p>
      <img src="https://placehold.co/600x400" alt="Placeholder Image" style="display: block; margin: 10px auto; width: 600px;">

      <h2>Conclusion</h2>
      <p>Thank you for exploring this demo. You can <em>edit</em>, <strong>format</strong>, and <u>style</u> all the elements as needed!</p>
    </div>
      </div>
    </div>

    <script src="../../../../js/tinymce/tinymce.js"></script>
    <script src="../../../../scratch/demos/core/demo.js"></script>
    <script>demos.DisabledDemo();</script>

  </body>
</html>
